<template>
  <view>
    <!-- <customtop2 top_title="个人中心"></customtop2> -->
    <view class="top">
      <view class="container">
        <view
          class="left"
          @click="jumpPage('/pages/account/login_password')"
          v-if="!logined"
        >
          <view class="avatar"
            ><image class="img" src="/static/images/user_avatar_default.png"
          /></view>
          <view class="info">
            <view class="name"
              >立即登录<i class="iconfont icon-xiangyou-copy"></i
            ></view>
            <view class="tags">
              <span>点击登录</span>
            </view>
          </view>
        </view>
        <view
          class="left"
          @click="jumpPage('/pages/account/user_info')"
          v-if="logined"
        >
          <view class="avatar"><image class="img" :src="user.avatar" /></view>
          <view class="info">
            <view class="name"
              >{{ user.nickname }}<i class="iconfont icon-xiangyou-copy"></i
            ></view>
            <view class="tags">
              <span>UID:{{ user.id }}</span>
            </view>
          </view>
        </view>
        <view class="right">
          <view
            class="qiandao"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/qiandao'
                  : '/pages/account/login_password'
              )
            "
          >
            <i class="iconfont icon-yue"></i>
            <span class="txt">签到</span>
          </view>
        </view>
      </view>
    </view>

    <view class="container">
      <view
        class="box1"
        @click="
          jumpPage(
            logined ? '/pages/account/vip' : '/pages/account/login_password'
          )
        "
      >
        <view v-if="!logined || user.vip == 0">
          <view class="left">
            <image class="img" src="/static/images/vip_on.png" />
            <view class="info">
              <span class="s s1">未开通</span>
              <span class="s s2">开通会员超大权益</span>
            </view>
          </view>
          <view class="open_vip">开通会员</view>
        </view>
        <view v-if="logined && user.vip == 1">
          <view class="left">
            <image class="img" src="/static/images/vip_on.png" />
            <view class="info">
              <span class="s s1">已开通</span>
              <span class="s s2">{{ user.member_end_date }} 到期</span>
            </view>
          </view>
          <view class="open_vip">续费会员</view>
        </view>
      </view>

      <view class="box2">
        <view class="stitle">常用板块</view>
        <view class="items">
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/gold'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="icon"><i class="iconfont icon-jinbi"></i></view>
            <view class="txt">我的金币</view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/wallet'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="icon"><i class="iconfont icon-qianbao"></i></view>
            <view class="txt">我的钱包</view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/abb/my_publish'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="icon"><i class="iconfont icon-icon_fabu"></i></view>
            <view class="txt">我的发布</view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/danbao'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="icon"><i class="iconfont icon-duiwaidanbao"></i></view>
            <view class="txt">担保交易</view>
          </view>
        </view>
      </view>

      <view class="box4">
        <view class="items">
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/user_info'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-guanyu"></i>个人信息</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/company/edit'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-qiyerenzheng"></i>公司信息</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/auth_index'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-renzheng"></i>身份认证</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/user_password'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-mima1"></i>设置密码</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view
            class="item"
            @click="
              jumpPage(
                logined
                  ? '/pages/account/user_contact'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-ziyuan"></i>联系方式</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view
            class="item none"
            @click="
              jumpPage(
                logined
                  ? '/pages/im/friend_list'
                  : '/pages/account/login_password'
              )
            "
          >
            <view class="left"
              ><i class="iconfont icon-yaoqing1"></i>我的好友</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
        </view>
      </view>

      <view class="box4">
        <view class="items">
          <view class="item" @click="jumpPage('/pages/article/show?id=9')">
            <view class="left"
              ><i class="iconfont icon-lianxiren"></i>关于我们</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view class="item" @click="jumpPage('/pages/article/show?id=2')">
            <view class="left"
              ><i class="iconfont icon-kefu2"></i>联系我们</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
          <view class="item" @click="jumpPage('/pages/article/show?id=3')">
            <view class="left"
              ><i class="iconfont icon-guanyuliushu"></i>用户协议</view
            >
            <view class="right"
              ><i class="iconfont icon-xiangyou-copy"></i
            ></view>
          </view>
        </view>
      </view>

      <view class="box4">
        <view class="items">
          <view class="item about"
            >{{ config.app_name }} Version {{ config.app_version }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js";
import customtop2 from "@/components/customtop2.vue";

export default {
  components: { customtop2 },

  data() {
    return {
      loading: true,
      logined: false,
      user: {},
      config: {},
    };
  },

  onLoad: function (options) {
    uni.showLoading();
    request.post("/common/getConfig").then((res) => {
      this.config = res.data;
    });
  },

  onShow: function () {
    this.getUser();
  },

  methods: {
    getUser: function () {
      request.post("/user/getLoginUser").then((res) => {
        uni.hideLoading();
        this.loading = false;
        if (res.data.id) {
          this.logined = true;
          this.user = res.data;
        } else {
          this.logined = false;
        }
      });
    },

    qiandao: function () {
      uni.showLoading();
      request.post("/account/qiandao").then((res) => {
        uni.hideLoading();
        uni.showModal({
          showCancel: false,
          confirmText: "我知道了",
          content: res.message,
        });
      });
    },

    switchTab: function (url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function (url) {
      uni.navigateTo({ url: url });
    },
  },
};
</script>

<style>
page {
  padding-bottom: 30rpx;
}
.top {
  padding: 40rpx 0;
  overflow: hidden;
  /* background: #00b38a; */
  background: #2b9bfd;
  color: #fff;
  padding-bottom: 150rpx;
}
.top .avatar {
  float: left;
}
.top .avatar .img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  vertical-align: top;
  object-fit: cover;
}
.top .left .info {
  float: left;
  margin-left: 10px;
  padding-top: 10px;
  color: #fff;
}
.top .left .info .name {
  font-weight: 600;
}
.top .left .info .name i {
  margin-left: 5px;
  font-size: 24rpx;
  font-weight: 400;
}
.top .left .info .tags {
  color: #eee;
  font-size: 24rpx;
}
.top .left .info .tags span {
}
.top .right {
  float: right;
}
.top .right .qiandao {
  margin-top: 28rpx;
  background: rgba(238, 238, 238, 0.3);
  padding: 5px 10px;
  border-radius: 3px;
}
.top .right .qiandao .txt {
  margin-left: 3px;
}

.box1 {
  margin-top: -100rpx;
  font-size: 28rpx;
  border-radius: 3px;
  background-color: #fff;
  padding: 30rpx 30rpx 40rpx 30rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}
.box1 .left {
  display: flex;
  align-items: center;
  float: left;
}
.box1 .img {
  width: 100rpx;
  height: 100rpx;
}
.box1 .info {
  margin-left: 10px;
}
.box1 .info .s {
  display: block;
}
.box1 .info .s2 {
  font-size: 12px;
  color: #999;
}
.box1 .open_vip {
  float: right;
  background-color: #d8b66c;
  color: #fff;
  padding: 5px 10px;
  margin-right: -30rpx;
  margin-top: 20rpx;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.box2 {
  background-color: #fff;
  margin-bottom: 30rpx;
  padding: 40rpx 0;
  font-size: 28rpx;
  border-radius: 3px;
}
.box2 .items {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -30rpx;
}
.box2 .item {
  width: 25%;
  text-align: center;
  margin-bottom: 30rpx;
}
.box2 .item .icon .iconfont {
  margin-bottom: 3px;
  font-size: 24px;
  color: #00b38a;
}
.box2 .item .txt {
  margin-top: 5px;
}

.box3 {
  font-size: 28rpx;
  border-radius: 3px;
  background-color: #fff;
  padding: 30rpx;
  overflow: hidden;
  margin-bottom: 1rem;
}
.box3 .items {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -10px;
}
.box3 .item {
  width: 50%;
  margin-bottom: 10px;
}
.box3 .item .iconfont {
  margin-right: 6px;
}
.box3 .item .icon1 {
  color: #198754;
}
.box3 .item .icon2 {
  color: #007aff;
}
.box3 .item .icon3 {
  color: #38b7ee;
}
.box3 .item .icon4 {
  color: #ff4b9f;
}

.box4 {
  border-radius: 3px;
  margin-bottom: 30rpx;
  background-color: #fff;
  font-size: 28rpx;
}
.box4 .items {
}
.box4 .items .item {
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 auto;
  border-bottom: 1px solid #f9f9f9;
  padding: 0 30rpx;
  overflow: hidden;
  display: block;
}
.box4 .items .item:last-child {
  border: none;
}
.box4 .items .item .left {
  float: left;
}
.items .item .left i {
  margin-right: 6px;
  display: inline-block;
}
.box4 .items .item .right {
  float: right;
}
.box4 .items .item .right i {
  color: #999;
  font-size: 24rpx;
}
.box4 .items .item .right span {
  margin-right: 5px;
  color: #999;
  font-size: 28rpx;
}
.box4 .items .item.about {
  text-align: center;
  color: #999;
  letter-spacing: 2px;
  font-size: 24rpx;
}

.stitle {
  padding: 0 30rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}
</style>
